<template>
  <div class="app-container">
    <el-input v-model="search" placeholder="输入编号或者名称关键字搜索" size="mini" align="right"/>
    <el-table
      v-loading="Loading"
      :data="data.filter(data => !search || data.Name.toLowerCase().includes(search.toLowerCase()) || data.No.toLowerCase().includes(search.toLowerCase()))"
      element-loading-text="Loading"
      style="width: 100%"
    >
      <el-table-column type="expand" class-name="column-background">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand" >
            <el-form-item label="颜色">
              <span>{{ props.row.Colour }}</span>
            </el-form-item>
            <el-form-item label="安全存量">
              <span>{{ props.row.MerchandiseSafetyStock }}</span>
            </el-form-item>
            <el-form-item label="目标销量">
              <span>{{ props.row.PresaleNumber }}</span>
            </el-form-item>
            <el-form-item label="销量">
              <span>{{ props.row.SalesVolume }}</span>
            </el-form-item>
            <el-form-item label="尺寸">
              <span>{{ props.row.Size }}</span>
            </el-form-item>
            <el-form-item label="单个进价(元)">
              <span>{{ props.row.PurchasePrice }}</span>
            </el-form-item>
            <el-form-item label="单个重量(g)">
              <span>{{ props.row.Weight }}</span>
            </el-form-item>
            <el-form-item label="件/毛重(kg)">
              <span>{{ props.row.PackgeWeight }}</span>
            </el-form-item>
            <el-form-item label="装箱数">
              <span>{{ props.row.PackgeNum }}</span>
            </el-form-item>
            <el-form-item label="整件箱规">
              <span>{{ props.row.PackgeCube }}</span>
            </el-form-item>
            <el-form-item label="供应商">
              <span>{{ props.row.Supply }}</span>
            </el-form-item>
            <el-form-item label="位置">
              <span>{{ props.row.Location }}</span>
            </el-form-item>
            <el-form-item label="原装标签">
              <span>{{ props.row.Logo }}</span>
            </el-form-item>
            <el-form-item label="备注">
              <span>{{ props.row.Remark }}</span>
            </el-form-item>
          </el-form>
          <el-table :data="props.row.Ponents" style="width: 100%">
            <el-table-column label="配件编号" prop="No"/>
            <el-table-column label="配件名称" prop="Name"/>
            <el-table-column label="单个配件进价(元)" prop="PurchasePrice"/>
            <el-table-column label="配件供应商" prop="Supply"/>
            <el-table-column label="配件数量" prop="Number"/>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="编号" prop="No"/>
      <!--      <el-table-column label="类型" prop="Type"/>-->
      <el-table-column label="名称" prop="Name"/>
      <el-table-column label="库存" prop="Number"/>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="info" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"/>
          <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"/>
        </template>
      </el-table-column>
    </el-table>

    <!-- 跟新表单 -->
    <el-dialog :visible.sync="dialogFormVisible" title="修改成品信息" width="99%">
      <el-form v-enterToNext="true" ref="postForm" :model="postForm" :rules="rules" status-icon label-width="150px" >
        <el-form-item label="编号" prop="No">
          <el-input v-model="postForm.No"/>
        </el-form-item>
        <!--        <el-form-item label="类型" prop="Type">-->
        <!--          <el-select v-model="postForm.Type" filterable clearable placeholder="请选择" size="mini">-->
        <!--            <el-option-->
        <!--              v-for="item in options"-->
        <!--              :key="item.ID"-->
        <!--              :label="item.Name"-->
        <!--              :value="item.ID"/>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="名称" prop="Name" width="29%">
          <el-input v-model="postForm.Name"/>
        </el-form-item>
        <el-form-item label="颜色" prop="Colour">
          <el-input v-model="postForm.Colour"/>
        </el-form-item>
        <el-form-item label="安全存量" prop="MerchandiseSafetyStock">
          <el-input v-model.number="postForm.MerchandiseSafetyStock"/>
        </el-form-item>
        <el-form-item label="目标销量" prop="PresaleNumber">
          <el-input v-model.number="postForm.PresaleNumber"/>
        </el-form-item>
        <el-form-item label="尺寸" prop="Size">
          <el-input v-model="postForm.Size"/>
        </el-form-item>
        <el-form-item label="单个进价(元)" prop="Purchase_Price">
          <el-input v-model.number="postForm.Purchase_Price"/>
        </el-form-item>
        <el-form-item label="单个重量(g)" prop="Weight">
          <el-input v-model.number="postForm.Weight"/>
        </el-form-item>
        <el-form-item label="件/毛重(kg)" prop="PackgeWeight">
          <el-input v-model.number="postForm.PackgeWeight"/>
        </el-form-item>
        <el-form-item label="装箱数" prop="PackgeNum">
          <el-input v-model.number="postForm.PackgeNum"/>
        </el-form-item>
        <el-form-item label="整件箱规" prop="PackgeCube">
          <el-input v-model="postForm.PackgeCube"/>
        </el-form-item>
        <el-form-item label="供应商" prop="Supply">
          <el-select v-model="postForm.Supply" filterable clearable placeholder="请选择" size="mini">
            <el-option
              v-for="item in supplys"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"/>
          </el-select>
        </el-form-item>
        <el-form-item label="位置" prop="Location">
          <el-autocomplete
            v-model="postForm.Location"
            :fetch-suggestions="querySearch"
            class="inline-input"
            placeholder="请输入位置"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="备注" prop="Remark">
          <el-input v-model="postForm.Remark"/>
        </el-form-item>
      </el-form>
      <br>
      <span style="font-size: 14px;font-weight: 700;color: red;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;margin-left: 8px"> 请选择配件 : </span>
      <el-select v-model="selectValue" filterable clearable placeholder="请选择" size="mini" @change="selectChange">
        <el-option
          v-for="item in selectValues"
          :key="item.ID"
          :label="item.No"
          :value="item"
          :disabled="item.Disabled"/>
      </el-select>
      <br>
      <el-table :data="components" style="width: 100%">
        <el-table-column label="配件编号" prop="No"/>
        <el-table-column label="配件名称" prop="Name"/>
        <el-table-column label="单个配件进价(元)" prop="PurchasePrice"/>
        <el-table-column label="配件供应商" prop="Supply"/>
        <el-table-column label="配件数量" width="150">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.Number" :min="0" size="mini" @change="handleChange()"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDeleteComponent(scope.$index,scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <br >
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.column-background {
  background-color: gainsboro;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 150px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import { getCommoditiesAsAdmin, deleteCommodity, updateCommodity, getCommodityType, getLocation } from '@/api/commodity'
import { getComponents } from '@/api/component'
import { getSupply } from '@/api/supply'

export default {
  data() {
    return {
      Loading: true,
      data: [],
      selectValue: '',
      selectValues: [],
      supplys: [],
      locations: [],
      components: [],
      search: '',
      dialogFormVisible: false,
      postForm: {
        ID: '',
        No: '',
        Type: '',
        Name: '',
        Colour: '',
        Remark: '',
        Supply: '',
        Location: '',
        MerchandiseSafetyStock: 0,
        PresaleNumber: 0,
        PackgeNum: 0,
        PackgeCube: '',
        PackgeWeight: 0,
        Weight: 0,
        Size: '',
        Purchase_Price: 0,
        Ponents: []
      },
      rules: {
        Name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        PackgeNum: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        // Type: [
        //   { required: true, message: '请输入', trigger: 'blur' }
        // ],
        Supply: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        Location: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        MerchandiseSafetyStock: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.Loading = true
      getCommoditiesAsAdmin().then(response => {
        console.log(response)
        this.data = response
        this.Loading = false
      })
      getCommodityType().then(response => {
        console.log(response)
        this.options = response.map(item => {
          return {
            ID: item.ID,
            Name: item.Name
          }
        })
      })
      getSupply().then(response => {
        console.log(response)
        this.supplys = response.map(item => {
          return {
            ID: item.Name,
            Name: item.Name
          }
        })
      })
      getLocation().then(response => {
        console.log(response)
        this.locations = response.map(item => {
          return {
            value: item.Location
          }
        })
      })
      getComponents().then(response => {
        console.log(response)
        this.selectValues = response.map(item => {
          return {
            Number: 0,
            ID: item.ID,
            No: item.No,
            Name: item.Name,
            PurchasePrice: item.PurchasePrice,
            Supply: item.Supply
          }
        })
      })
    },
    handleDelete(index, data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.Loading = true
          console.log(data.ID)
          deleteCommodity(data.ID)
            .then(response => {
              console.log(response)
              this.$message.success('删除成功')
              this.data.splice(index, 1)
              this.Loading = false
            })
            .catch(() => {
              this.Loading = false
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    handleEdit(index, data) {
      this.dialogFormVisible = true
      this.postForm.ID = data.ID
      this.postForm.No = data.No
      this.postForm.Type = data.Type

      this.postForm.Name = data.Name
      this.postForm.Colour = data.Colour
      this.postForm.Remark = data.Remark
      this.postForm.MerchandiseSafetyStock = data.MerchandiseSafetyStock
      this.postForm.PresaleNumber = data.PresaleNumber
      this.postForm.PackgeNum = data.PackgeNum
      this.postForm.PackgeCube = data.PackgeCube
      this.postForm.PackgeWeight = data.PackgeWeight
      this.postForm.Weight = data.Weight
      this.postForm.Supply = data.Supply
      this.postForm.Location = data.Location
      this.postForm.Size = data.Size
      this.postForm.Purchase_Price = data.PurchasePrice
      this.components = data.Ponents
      for (let i = 0; i < this.selectValues.length; i++) {
        for (let j = 0; j < this.components.length; j++) {
          if (this.selectValues[i].ID === this.components[j].ID) {
            this.selectValues[i].Disabled = true
            continue
          }
        }
      }
    },
    handleEditConfirm() {
      const len = this.components.length
      if (len > 0) {
        this.postForm.Ponents = []
        for (let i = 0; i < len; i++) {
          if (this.components[i].Number <= 0) {
            this.$message.error('配件数量不能为 0')
            this.postForm.Ponents = []
            return
          }
          this.postForm.Ponents.push({
            ID: this.components[i].ID,
            Number: this.components[i].Number
          })
        }
      }
      this.Loading = true
      updateCommodity(this.postForm.ID, this.postForm)
        .then(response => {
          console.log(response)
          this.$message.success('更新成功')
          this.Loading = false
          this.dialogFormVisible = false
          this.fetchData()
        })
        .catch(() => {
          this.Loading = false
          this.postForm.Ponents = []
          this.$message.error('更新失败')
        })
    },
    selectChange() {
      if (this.selectValue !== '') {
        this.selectValue.Disabled = true
        this.components.push(this.selectValue)
        this.selectValue = ''
      }
    },
    handleDeleteComponent(index, row) {
      this.components.splice(index, 1)
      row.Disabled = false
    },
    querySearch(queryString, cb) {
      var locations = this.locations
      var results = queryString ? locations.filter(this.createFilter(queryString)) : locations
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>
